import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { usePresentationState } from "@/states/presentation-state";
import { Layout } from "lucide-react";
import { ModelPicker } from "./ModelPicker";

export function PresentationControls({
  shouldShowLabel = true,
}: {
  shouldShowLabel?: boolean;
}) {
  const {
    numSlides,
    setNumSlides,
    language,
    setLanguage,
    pageStyle,
    setPageStyle,
  } = usePresentationState();

  return (
    <div>
      {/* Model Selection */}
      &lt;ModelPicker shouldShowLabel={shouldShowLabel} /&gt;

      {/* Number of Slides */}
      <div>
        {shouldShowLabel && (
          &lt;label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"&gt;
            Number of slides
          &lt;/label&gt;
        )}
        &lt;Select
          value={String(numSlides)}
          onValueChange={(v) =&gt; setNumSlides(Number(v))}
        &gt;
          &lt;SelectTrigger&gt;
            &lt;SelectValue placeholder="Select number of slides" /&gt;
          &lt;/SelectTrigger&gt;
          &lt;SelectContent&gt;
            {[1, 2, 3, 4, 5, 6, 7, 8, 10, 12].map((num) =&gt; (
              &lt;SelectItem key={num} value={String(num)}&gt;
                {num} slides
              &lt;/SelectItem&gt;
            ))}
          &lt;/SelectContent&gt;
        &lt;/Select&gt;
      </div>

      {/* Language */}
      <div>
        {shouldShowLabel && (
          &lt;label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"&gt;
            Language
          &lt;/label&gt;
        )}
        &lt;Select value={language} onValueChange={setLanguage}&gt;
          &lt;SelectTrigger&gt;
            &lt;SelectValue placeholder="Select language" /&gt;
          &lt;/SelectTrigger&gt;
          &lt;SelectContent&gt;
            &lt;SelectItem value="en-US"&gt;English (US)&lt;/SelectItem&gt;
            &lt;SelectItem value="pt"&gt;Portuguese&lt;/SelectItem&gt;
            &lt;SelectItem value="es"&gt;Spanish&lt;/SelectItem&gt;
            &lt;SelectItem value="fr"&gt;French&lt;/SelectItem&gt;
            &lt;SelectItem value="de"&gt;German&lt;/SelectItem&gt;
            &lt;SelectItem value="it"&gt;Italian&lt;/SelectItem&gt;
            &lt;SelectItem value="ja"&gt;Japanese&lt;/SelectItem&gt;
            &lt;SelectItem value="ko"&gt;Korean&lt;/SelectItem&gt;
            &lt;SelectItem value="zh"&gt;Chinese&lt;/SelectItem&gt;
            &lt;SelectItem value="ru"&gt;Russian&lt;/SelectItem&gt;
            &lt;SelectItem value="hi"&gt;Hindi&lt;/SelectItem&gt;
            &lt;SelectItem value="ar"&gt;Arabic&lt;/SelectItem&gt;
          &lt;/SelectContent&gt;
        &lt;/Select&gt;
      </div>

      {/* Page Style */}
      <div>
        {shouldShowLabel && (
          &lt;label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"&gt;
            Page style
          &lt;/label&gt;
        )}
        &lt;Select value={pageStyle} onValueChange={setPageStyle}&gt;
          &lt;SelectTrigger&gt;
            <div>
              &lt;Layout className="h-4 w-4" /&gt;
              &lt;SelectValue placeholder="Select page style" /&gt;
            </div>
          &lt;/SelectTrigger&gt;
          &lt;SelectContent&gt;
            &lt;SelectItem value="default"&gt;
              <div>
                <span>Default</span>
              </div>
            &lt;/SelectItem&gt;
            &lt;SelectItem value="traditional"&gt;
              <div>
                <span>Traditional</span>
              </div>
            &lt;/SelectItem&gt;
            &lt;SelectItem value="tall"&gt;
              <div>
                <span>Tall</span>
              </div>
            &lt;/SelectItem&gt;
          &lt;/SelectContent&gt;
        &lt;/Select&gt;
      </div>
    </div>
  );
}
